<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* input[value] {
				color: green;
			} */

			/* 必须是input同时具有value这个属性 */
			/* 表示选中有这个属性的表单并且修改这个属性的样式 */
			input[type=text] {
				color: red;
			}
			/* 只选择type是text类型的input */
			
			div[class^=icon]{
				color: red;
			}
			/* 先选中div包含class属性的，并且以icon开头的元素 */
			
			div[class$=data]{
				color: green;
			}
			/* 先选中div包含class属性的，并且以data结尾的元素 */
			
			div[class*=lala] {
				color: hotpink;
			}
			/* 先选中div包含class属性的，并且含有lala的元素 */
			
			.lalala {
				color: skyblue;
			}
			/* 这里权重不够不会生效，因为上面权重是11，而这里只有10 */
			
		</style>
	</head>
	<body>
		<!-- 利用属性选择器可以不用借助id或类选择器 -->
		
		<!-- <input type="text" name="" id="" value="请输入内容" />
		<input type="text" name="" id="" value="" /> -->
		
		
		<!-- 属性选择器还可以根据 属性=值 来选择某些元素 -->
		<!-- 这个是重点 -->
		<input type="text" name="" id="" value="" />
		<input type="password" name="" id="" value="" />
		
		
		<!-- 属性选择器还可以选择属性值开头的某些元素 -->
		<div class='icon1'>小图标</div>
		<div class='icon2'>小图标</div>
		<div class='icon3'>小图标</div>
		<div class='icon4'>小图标</div>
	
		<div></div>
		
		<!-- 属性选择器还可以选择属性值结尾的某些元素 -->
		<div class='icon1-data'>这是小怪兽 </div>
		<div class='icon2-data'>这是奥特曼</div>
		<div class='icon4-io'>奥特曼打怪兽</div>
		
		<!-- 属性选择器还可以选择包含属性值的某些元素 -->
		<br>
		<div class='lalala'>这是啦啦啦</div>
		<div class='ababab'>这是哒哒哒</div>
		
		<h1>类选择器 属性选择器 伪类选择器权重都是10</h1>
		
	</body>
</html>
